<template>
    <div id="tab">
        <ul>    
            <li @click="toHome"><i class="icon iconfont icon-cart"> </i><span>首页</span></li>
            <li @click="totype"><i class="icon iconfont icon-electrical"> </i>分类</li>
            <li @click="tocart"><i class="icon iconfont icon-print"> </i>购物车</li>
            <li @click="tomy"><i class="icon iconfont icon-attachment"> </i>我的</li>
        </ul>        
    </div>
</template>

<script>
export default {
    name: 'Tab',
    data() {
        return {
        };
    },
    created() {
    },
    methods: {
        toHome() {
                this.$router.push('/')
        },
        totype() {
                this.$router.push('/type')
        },
        tocart() {
                this.$router.push('/cart')
        },
        tomy() {
                this.$router.push('/my')
        
        }
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#tab{
    width: 100%;
    height: 1rem;
    background-color: #fff;
    position: absolute;
    bottom: 0 ;
    left: 0;
    ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        li{
            flex-basis: 25%;
            text-align: center;
            font-size: .24rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    }
}
</style>
